<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生社团表</title>
    <link rel="stylesheet" href="../css/element.css">
    <style>
        h3 {
            margin-bottom: 50px;
        }

        #app {
            margin: 100px auto;
            width: 900px;
        }
    </style>
</head>

<body>
<div id="app">
    <template>
        <div>
            <h1>学生社团表</h1>
            <div style="margin-top: 20px">

                <el-button type="info" plain @click="openAddPage" style="margin-left: 400px">添加成员</el-button>
            </div>
            <el-table
                    :data="studentList"
                    border
                    style="width: 100%; margin-top: 20px">
                <el-table-column
                        prop="studentId"
                        label="学号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orgId"
                        label="社团号">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button @click="openUpdatePage(scope.row)" type="text" size="small">更新</el-button>
                        <el-button @click="deleteItem(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 20px">
                <el-pagination
                        layout="total,sizes,prev, pager, next"
                        @current-change="page"
                        @size-change="handleSizeChange"
                        :page-sizes="[2, 5, 10]"
                        :page-size="limit"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </template>

    <el-dialog title="学生社团表" :visible.sync="dialogFormVisible">
        <el-form label-width="80px" :model="student">
            <el-form-item>
                <el-input v-model="student.id" type="hidden"></el-input>
            </el-form-item>
            <el-form-item label="学号">
                <el-input v-model="student.studentId"></el-input>
            </el-form-item>
            <el-form-item label="社团号">
                <el-input v-model="student.orgId"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="add()">提 交</el-button>
        </div>
    </el-dialog>

</div>


<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/element.js"></script>
<script src="../js/axios.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            total: 10,
            currentPage: 1,
            limit: 2,
            dialogFormVisible: false,
            resumeVisible:false,
            studentList: [],
            formLabelWidth: '120px',
            student: {},
            studentResume:{},
            input:''
        },
        methods: {
            updateList: function () {
                axios.get('studentOrg/list?page=' + this.currentPage + '&size=' + this.limit)
                    .then(response => {
                        console.log(response)
                            this.studentList = response.data.result;
                            this.studentList.forEach((value)=>{

                                }
                            )
                            this.total = response.data.totalItem;
                        }
                    )
            },
            handleSizeChange: function (limit) {
                this.limit = limit;
                this.updateList();
            },
            page: function (currentPage) {
                this.currentPage = currentPage;
                this.updateList();
            },
            cancel: function () {
                this.dialogFormVisible = false;
                setTimeout(() => app.student = {}, 300);
            },
            openAddPage: function () {
                app.student={};
                this.dialogFormVisible = true
            },
            openUpdatePage: function (index) {
                axios.get('/studentOrg/' + index.id)
                    .then(function (res) {
                            console.log(res)
                            if (res.data.code === 200) {
                                app.student = res.data.result;
                                app.dialogFormVisible = true;
                            } else {
                                app.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        }
                    )
            },
            deleteItem: function (index) {
                axios.delete('/studentOrg/' + index.id).then(
                    function (res) {
                        console.log(res)
                        if (res.data.code === 200) {
                            app.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            app.updateList();
                        } else {
                            app.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    }
                )
            },
            add: () => {
                if (app.student.id) {
                    axios.put('/studentOrg', app.student)
                        .then(function (res) {
                            console.log(res)
                            if (res.data.code === 200) {
                                app.$message({
                                    showClose: true,
                                    message: '更新成功',
                                    type: 'success'
                                });
                                setTimeout(() => {app.dialogFormVisible = false;
                                    app.student = {};
                                }, 500);
                                app.updateList();
                            } else {
                                app.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        })
                } else {
                    axios.post('/studentOrg', app.student)
                        .then(function (res) {
                            console.log(res)
                            if (res.data.code === 200) {
                                app.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                                setTimeout(() => app.dialogFormVisible = false, 1000);
                                app.updateList();
                            } else {
                                app.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        })
                }
            },
            search:function (number)
            {
                axios.get('/studentOrg/list'+ number).then(
                    function (res) {
                        console.log(res)
                        if (res.data.code === 200) {
                            if(res.data.data){
                                app.studentResume = res.data.result;
                            }
                            app.resumeVisible = true;
                        } else {
                            app.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    }
                )
            }
        },
        mounted() {
            this.updateList();
        },
        computed:
            {}

    })

</script>
</body>
</html>